<template>
  <!-- 本周人员 -->
  <div class="personnel">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中心内容 -->
    <div class="content">
      <van-tree-select height="100%" :items="items" :main-active-index.sync="active">
        <template #content>
          <div v-if="active===0">
            <van-cell v-for="(item,index) in dataAM" :key="index">
              <template #title>
                <span>{{item.day}}</span>
                <span style="margin-left:20px">{{item.staffName !== ''?item.staffName:'无'}}</span>
              </template>
            </van-cell>
          </div>
          <div v-if="active===1">
            <van-cell v-for="(item,index) in dataPM" :key="index">
              <template #title>
                <span>{{item.day}}</span>
                <span style="margin-left:20px">{{item.staffName !== ''?item.staffName:'无'}}</span>
              </template>
            </van-cell>
          </div>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { GetWeekDefaultSerSwitch } from '@/request/api'
export default {
  name: 'Personnel',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      dataAM: [],
      dataPM: [],
      active: 0,
      items: [{ text: '上午' }, { text: '下午' }]
    }
  },
  created () {
    // 获取数据
    GetWeekDefaultSerSwitch().then(res => {
      console.log(res.data)
      this.dataAM = res.data.dataAM
      this.dataPM = res.data.dataPM
    })
  }
}
</script>

<style lang="less" scoped>
.personnel {
  .content {
    .van-sidebar-item--select::before {
      background-color: burlywood;
    }
    .van-tree-select__content {
      box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
    }
  }
}
</style>
